<template>
	<view class="wrap">
		<view class="j-box p32 ">
			<view class="j-top f-r-b">
				<view class=" btn export" @click="importData">导入关注商品</view>
				<view class="f-r-e">
					<view class="btn save" :style="{'color':themeColor,'borderColor':themeColor,}" @click="saveData">保存</view>
					<view class="btn download" :style="{'background':themeColor,}" @click="getDetail">生成明细</view>
				</view>
			</view>
			<view class="j-top f-r-b">
				<view class="btn jsq" @click="tojsq">计算器</view>
				<view>总金额 ¥{{totalPrice}}</view>
			</view>
			<view class="j-top f-r-b">
				<view>{{$getToday()}}</view>
				<view>总数量 {{totalQuantity}}</view>
			</view>
		</view>
		<view class="j-table" style="margin-bottom: 100rpx;">
			<view class="f-r-b th" :style="{'background':themeColor+'80','opacity':1,}">
				<view class="tr tr1">NO</view>
				<view class="tr tr2">名称</view>
				<view class="tr tr3">数量</view>
				<view class="tr tr4">单价(¥)</view>
				<view class="tr tr5">金额(¥)</view>
				<view class="tr tr6">
					<uni-icons type="closeempty" size="17" color="#999" @click="delAll" ></uni-icons>
				</view>
			</view>
			<view class="f-r-b th" v-for="(item,index) in tableList" :key="index">
				<view class="tr tr1">{{index+1}}</view>
				<view class="tr tr2">
					<input class="text-input input" v-model="item.productName"  type="text" :maxlength="30" />
				</view>
				<view class="tr tr3">
						<input class="input text-input " v-model="item.amount"  type="number"  @input="inputAmount($event,item,index,'amount')"/>
				</view>
				<view class="tr tr4">
					<input class="text-input" v-model="item.unitPrice"  type="digit" @input="inputAmount($event,item,index,'unitPrice')"  />
				</view>
				
				<view class="tr tr5"  :style="{'background':themeColor+'80','opacity':1,}">
					<text>{{item.totalPrice||''}}</text>
				</view>
				<view class="tr tr6">
					<uni-icons type="closeempty" size="17" color="#999" @click="delData(item,index)" ></uni-icons>
				</view>
			</view>
			<view class="f-r-c m32 foot-add " :style="{'borderColor':themeColor,}" @click="addData">
				<uni-icons type="plusempty" size="15" :color="themeColor" ></uni-icons>
				<text :style="{'color':themeColor}">一键加行</text>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
export default{
	data(){
		return{
			tableList:[],
			
		}
	},
	computed: {
	  themeColor() {
	    return this.$themeColor;
	  },
	  today(){
		  return this.$getToday();
	  },
	  total(){
		  this.tableList.forEach((item)=>{
		  			 if(item.amount&&item.amount!=''&&item.amount>0){
		  				 item.amount=Number(item.amount);
		  			 }
		  			 else{
		  				 item.amount=null;
		  				 
		  			 }
		  			 if(item.unitPrice&&item.unitPrice!=''&&item.unitPrice>0){
		  			 	 item.unitPrice=Number(item.unitPrice);
		  			 }else{
		  			 	 item.unitPrice=null;
		  				 
		  			 }
					 if(item.amount&&item.unitPrice){
						item.totalPrice=item.amount * item.unitPrice;
					 }else{
						 item.totalPrice=0;
					 }
					 
		  })
		  console.log(this.tableList);
	  },
	  totalQuantity(){
		  return this.tableList.reduce((total, item) => total + item.amount, 0);
	  },
	   // 计算总价
	  totalPrice() {
		 return this.tableList.reduce((total, item) => total + item.totalPrice, 0);
	  },
	  ids(){
		  return this.tableList.map(item => item.id);
	  },
	},
	onShow() {
		this.getList();
	},
	methods:{
		 checkNum(e) {
			let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
			if (!val) {
				return ''
			}
			var reg = /[^\d.]/g
			// 只能是数字和小数点，不能是其他输入
			val = val.replace(reg, "")
			// // 保证第一位只能是数字，不能是点
			val = val.replace(/^\./g, "");
			// // 小数只能出现1位
			val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
			// // 小数点后面保留2位
			val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
			console.log(val);
			return val
		},
		
		//限制只能输入数字
		inputAmount(e,item,index,key){

			if(key=='amount'){
				const inputTypeNum =/[^\d]/g //数字
				this.$nextTick(() => {
					let val=e.target.value.replace(inputTypeNum, '')
					item[key] =val;
				})
				if(e.detail.value.length>=5){
					let bol= Number(e.detail.value)>10000;
					if(bol){
						this.$nextTick(() => {
							item[key] =1;
						})
						return;
					}
					
				}
				
				
			}else{
				const inputTypeNum =/[^\d.]/g //数字
				this.$nextTick(() => {
					item[key] = e.target.value.replace(inputTypeNum, '');
				})
			
			
				//大小
				//必须小于  20000元
				if(e.detail.value.length>=5){
					let bol= Number(e.detail.value)>10000;
					if(bol){
						this.$nextTick(() => {
							item[key] =1;
						})
						return;
					}
					
				}
				if(e.detail.value=='.'){
					console.log(1)
					this.$nextTick(() => {
						item[key] = 1;
					})
					return;
				}
				else if((e.detail.value.split('.').length - 1)>1){//保留小数点后2位，大于号嘴边的1可以自己改
					console.log(2)
					this.$nextTick(() => {
						item[key] =1;
					})
					return;
				}
				else if(e.detail.value.split('.').length>1){//小数点只能输入一个
					if((e.detail.value.split('.')[1].length>2)){
						console.log(3)
						this.$nextTick(() => {
							item[key] = 1;
						})
						return;
					}
				}
			
			}
		},
		getList(){
			let opts={
			    url:'/authMarket/getDetailList',
			    method: 'get'
			};
			this.$http(opts,{}).then(res=>{ this.tableList=res.data;})
		},
		//保存
		saveData(){
			if(this.tableList.length==0){
				uni.showToast({
					title:'请至少添加一行数据',
					icon:'none',
				})
				return false;
			};
			let opts={
			    url:'/authMarket/inUpDetails',
			    method: 'post'
			};
			let param={
				details:this.tableList,
			}
			this.$http(opts,param).then(res=>{
				if(res.code==200){
					uni.showToast({
						title:'保存成功',
						icon:'none',
					})
					console.log(this.tableList);
					this.getList();
				}
			})
			
		},
		//删除
		delData(item,i){
			let xh=Number(i)+1;
			let that=this;
			uni.showModal({
				title:'提示',
				content:'是否清空第'+xh+"行数据?",
				success: function (res) {
						if (res.confirm) {
							if (item.id) {
								that.delrowData(item.id,i);
							} else{
								that.tableList.splice(i,1);
								
							}
							
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				
			})
			
		},
		delAll(){
			if(this.tableList.length==0){
				return false;
			};
			let that=this;
			uni.showModal({
				title:'提示',
				content:'是否一键清除所有数据?',
				success: function (res) {
						if (res.confirm) {
							console.log(that.ids);
							let opts={
							    url:'/authMarket/deleteDetailAll',
							    method: 'delete'
							};
							that.$http(opts,{
								ids:that.ids,
							}).then(res=>{
								if(res.code==200){
									that.getList();
									
								}
							})
							
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				
			})
			
		},
		delrowData(id,index){
			console.log("id",id);
			let opts={
			    url:`/authMarket/deleteDetail/${id}`,
			    method: 'delete'
			};
			let that=this;
			this.$http(opts,{}).then(res=>{
				if(res.code==200){
					that.tableList.splice(index,1);
				}
			})
			
		},
		//添加
		addData(){
			let item={
				productName:'',
				amount:'',
				unitPrice:'',
				totalPrice:'',
			};
			this.tableList.push(item);
		},
	    //导入
		importData(){
			uni.navigateTo({
				url:'/pages/index/follow?showBtntype=1'
			})
		},
		//生成明细
		getDetail(){
			if(this.tableList.length==0){
				uni.showToast({
					title:'请至少添加一行数据',
					icon:'none',
				})
				return false;
			};
			let opts={
			    url:'/authMarket/inUpDetails',
			    method: 'post'
			};
			let param={
				details:this.tableList,
			}
			this.$http(opts,param).then(res=>{
				if(res.code==200){
					uni.navigateTo({
						url:'/pages/index/mxDetail'
					})
				}
			})
			
		},
		//计算
		tojsq(){
			uni.navigateTo({
				url:'/pages/index/jsq',
			})
		},
		
	},
	
}
</script>
<style>
	page{
		background: #f8f8f8;
	}
</style>

<style scoped lang="less">
	.wrap{
		.j-box{
			overflow: hidden;
			background: #fff;
			
			
			.j-top{
				margin: 10rpx ;
				// border: 1rpx #000 solid;
				.btn{
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					box-sizing: border-box;
					text-align: center;
					border-radius: 30rpx;
					font-size: 28rpx;
					
				}
				.export{
					width: 200rpx;
					color: #fff;
					background: #ee2243;
					
				}
				.save{
					width: 150rpx;
					color: #ee2243;
					border: 1rpx #ee2243 solid;
					margin-right: 10rpx;
					
				}
				.download{
					width: 150rpx;
					color: #fff;
					background: #ee2243;
				}
				.jsq{
					width: 150rpx;
					color: #1ad;
					border: 1rpx #1ad solid;
				}
			}
		}
		.j-table{
			background: #fff;
			overflow: hidden;
			.th{
				height: 70rpx;
				.tr{
					height: 100%;
					width: calc((100vw - 170rpx)/4);
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					border-right: 1rpx #eee solid;
					border-bottom: 1rpx #eee solid;
					text{
						height: 40rpx;
						line-height: 40rpx;
						width: calc(100% - 20rpx);
						overflow: hidden;
						// background: #ccc;
						text-align: center;
					}
					.text-input{
						width: calc(100% - 20rpx);
						overflow: hidden;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						// background: #eee;
					}
				}
				.tr6{
					border-right: none;
					max-width: 80rpx;
					padding: 0;
				}
				.tr1{
					max-width: 80rpx;
					padding: 0;
					
				}
			}
		    .foot-add{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 40rpx;
				height: 60rpx;
				border: 1rpx #fff solid;
			}
		}
	}
</style>